import React from 'react'; 
import HookDemo from './demo/HookDemo';
import FunctionDeclare from './FunctionDeclare';
import PromiseAllTest from './PromiseAllTest';
import {useState} from 'react';
import ChatRoom from './demo/ChatRoom';
import AntdTalbleDemo from './demo/AntdTableDemo';
import AntdCarouselDemo from './demo/AntdCarouselDemo.tsx';
import AutoCompleteDemo from './demo/AutoCompleteDemo.tsx';
import UseCallbackDemo from './demo/UseCallbackDemo.tsx';
import DebounceDemo from './demo/DebounceDemo.tsx';


// 在react18中常使用，const声明，只能有一个export default
export default function Overview() {
    const [count, setCount] = useState(0);
    const [needShow, setNeedShow] = useState(false);
    const overViewStyle = { border: 'dashed', borderRadius: '10px', padding:'10px', position: 'absolute', left: '5%', top: '5%' }
    
    function switchShow() {
        setNeedShow(!needShow); // 切换显示
        setCount(count + 1); // 记录切换次数
    }

    const mustXX = (val) => {
        console.log('mustXX', val);
    };

    return ( 
        <div style={overViewStyle}>
            <button style={{ fontSize: '36px', backgroundColor: 'green', borderRadius: '10px' }} onClick={switchShow}>点击切换</button>
            <span style={{ fontSize: '15px' }} >已切换次数: {count}</span>
            <hr/>
            { 
            needShow
            ? (
                <>
                    <FunctionDeclare/>
                    <HookDemo/>
                    <hr/>
                    <PromiseAllTest/>
                </>
            )
            : (
                <>
                    <DebounceDemo/>
                    <hr/>
                    <UseCallbackDemo/>
                    <hr/>
                    <ChatRoom/>
                    <hr/>
                    <AutoCompleteDemo xx={mustXX}/>
                    <hr/>
                    <AntdTalbleDemo/>
                    <hr/>
                    <AntdCarouselDemo/>
                </>
            ) }
        </div>
    );
}
